<template>
	<div class="row quick-stats">
        <div class="col-sm-6 col-md-3">
            <div class="quick-stats__item bg-light-blue">
                <div class="quick-stats__info">
                    <h2>987,459</h2>
                    <small>Total Website Traffics</small>
                </div>

                <div class="quick-stats__chart sparkline-bar-stats">6,4,8,6,5,6,7,8,3,5,9,5</div>
            </div>
        </div>

        <div class="col-sm-6 col-md-3">
            <div class="quick-stats__item bg-amber">
                <div class="quick-stats__info">
                    <h2>356,785K</h2>
                    <small>Total Website Impressions</small>
                </div>

                <div class="quick-stats__chart sparkline-bar-stats">4,7,6,2,5,3,8,6,6,4,8,6</div>
            </div>
        </div>

        <div class="col-sm-6 col-md-3">
            <div class="quick-stats__item bg-purple">
                <div class="quick-stats__info">
                    <h2>$58,778</h2>
                    <small>Total Total Sales</small>
                </div>

                <div class="quick-stats__chart sparkline-bar-stats">9,4,6,5,6,4,5,7,9,3,6,5</div>
            </div>
        </div>

        <div class="col-sm-6 col-md-3">
            <div class="quick-stats__item bg-red">
                <div class="quick-stats__info">
                    <h2>214</h2>
                    <small>Total Support Tickets</small>
                </div>

                <div class="quick-stats__chart sparkline-bar-stats">5,6,3,9,7,5,4,6,5,6,4,9</div>
            </div>
        </div>
    </div>
</template>
<script>
export default {
	name: 'sparkline',
	mounted() {
		/*---------------------------------------
		    jQuery Sparklines
		----------------------------------------*/

		// Quick stats bar chart
		if($('.sparkline-bar-stats')[0]) {
			
		    $('.sparkline-bar-stats').sparkline('html', {
		        type: 'bar',
		        height: 36,
		        barWidth: 3,
		        barColor: '#fff',
		        barSpacing: 2
		    });
		}

		// Sign up widget line chart
		if($('.sparkline-line-signups')[0]) {
		    $('.sparkline-line-signups').sparkline('html', {
		        type: 'line',
		        width: '100%',
		        height: 50,
		        lineColor: 'rgba(255, 255, 255, 0.8)',
		        fillColor: 'rgba(0,0,0,0)',
		        lineWidth: 1,
		        maxSpotColor: '#fff',
		        minSpotColor: '#fff',
		        spotColor: '#fff',
		        spotRadius: 4,
		        highlightSpotColor: '#fff',
		        highlightLineColor: '#fff'
		    });
		}

		//Sample Sparkline Line Chart
		if ($('.sparkline-line')[0]) {
		    $('.sparkline-line').sparkline('html', {
		        type: 'line',
		        width: '100%',
		        height: 50,
		        lineColor: 'rgba(255,255,255,0.6)',
		        fillColor: 'rgba(0,0,0,0)',
		        lineWidth: 1,
		        maxSpotColor: '#fff',
		        minSpotColor: '#fff',
		        spotColor: '#fff',
		        spotRadius: 4,
		        highlightSpotColor: '#fff',
		        highlightLineColor: '#fff'
		    });
		}

		//Sample Sparkline Bar Chart
		if ($('.sparkline-bar')[0]) {
		    $('.sparkline-bar').sparkline('html', {
		        type: 'bar',
		        height: 40,
		        barWidth: 3,
		        barColor: '#03A9F4',
		        barSpacing: 2
		    });
		}

		//Sample Sparkline Tristate Chart
		if ($('.sparkline-tristate')[0]) {
		    $('.sparkline-tristate').sparkline('html', {
		        type: 'tristate',
		        height: 40,
		        posBarColor: '#32c787',
		        zeroBarColor: '#32c787',
		        negBarColor: '#f5c942',
		        barWidth: 3,
		        barSpacing: 2
		    });
		}

		//Sample Sparkline Discrete Chart
		if ($('.sparkline-discrete')[0]) {
		    $('.sparkline-discrete').sparkline('html', {
		        type: 'discrete',
		        height: 40,
		        lineColor: '#00BCD4',
		        thresholdColor: '#d066e2',
		        thresholdValue: 4
		    });
		}

		//Sample Sparkline Bullet Chart
		if ($('.sparkline-bullet')[0]) {
		    $('.sparkline-bullet').sparkline('html', {
		        type: 'bullet',
		        targetColor: '#fff',
		        performanceColor: '#03A9F4',
		        rangeColors: ['#ff6b68', '#fc7f7d', '#fc918f'],
		        width: '100%',
		        height: 50
		    });
		}

		//Sample Sparkline Pie Chart
		if ($('.sparkline-pie')[0]) {
		    $('.sparkline-pie').sparkline('html', {
		        type: 'pie',
		        height: 50,
		        sliceColors: ['#f5c942', '#ff6b68', '#03A9F4', '#32c787']
		    });
		}
	}
}
</script>